<template>
	<w-container class='plr-16 pt-16 flex flex-dir-col'>
		<w-navbar :title="navbarText"></w-navbar>
		
		<!-- 内容区 -->
		<view class="flex-1">
			<view class="form bg-color-item">
				<view class="ipt">
					<text>{{handleLang('收货人')}}</text>
					<u--input v-model="form.s_name" :customStyle="iptStyle" clearable :placeholder="handleLang('请输入姓名')" border="none" fontSize="14" color="#222"></u--input>
				</view>
				<view class="ipt">
					<text>{{handleLang('手机号码')}}</text>
					<u--input v-model="form.s_phone" :customStyle="iptStyle" clearable :placeholder="handleLang('请输入手机号')" border="none" fontSize="14" color="#222"></u--input>
				</view>
				<view class="ipt" @click="showPicker=true">
					<text>{{handleLang('所在地区')}}</text>
					<view class="right"></view>
					<u--input :value="getAreaText" readonly :customStyle="iptStyle" clearable :placeholder="handleLang('请选择市区')" border="none" fontSize="14" color="#222"></u--input>
				</view>
				<view class="ipt">
					<text>{{handleLang('详细地址')}}</text>
					<u--input v-model="form.address" :customStyle="iptStyle" clearable :placeholder="handleLang('街道 小区 门牌号等')" border="none" fontSize="14" color="#222"></u--input>
				</view>
			</view>
			
			<view class="isdef bg-color-item">
				<text>{{handleLang('设置默认收货地址')}}</text>
				<u-switch v-model="form.isdef" activeColor="#EE4C35" :activeValue="1" :inactiveValue="0" size="20"></u-switch>
			</view>
			
			<!-- 地址选择 -->
			<u-picker
			ref="uPicker" 
			:show="showPicker"
			:columns="columns" 
			closeOnClickOverlay 
			keyName="label"
			confirmColor="#EE4C35"
			@cancel="showPicker=false" 
			@close="showPicker=false" 
			@confirm="confirmAdd" 
			@change="changeHandler"></u-picker>
		</view>
		
		<!-- 按钮区 -->
		<view class="pb-24">
			<w-button shape="circle" :disabled="!able" @click="saveAdd">{{handleLang('保存')}}</w-button>
			<u-safe-bottom></u-safe-bottom>
		</view>
	</w-container>
</template>

<script>
	import addressDatas from '@/utils/address.json';
	import { add_edit_address,address_detail } from "@/api/address/index.js";
	
	let addressData = [];
	export default {
		data() {
			return {
				addressId:0,
				navbarText:'',
				iptStyle: {
					'height': '104rpx',
					'padding': '0'
				},
				form:{
					s_phone:'',
					s_name:'',
					province:'',
					city:'',
					area:'',
					address:'',
					isdef:0
				},
				
				// 地址属性
				showPicker: false,
				columns: [],
			};
		},
		computed:{
			able() {
				if(!this.form.s_name) return false;
				if(!this.form.s_phone) return false;
				if(!this.form.province) return false;
				if(!this.form.address) return false;
				return true
			},
			getAreaText() {
				let { province,city,area } = this.form;
				let text = province ? (province+city+area) : ''
				return text
			}
		},
		onLoad(e) {
			this.getAddressJson();
			
			this.addressId = e.id ? e.id : 0;
			this.navbarText = this.addressId ? '编辑收货地址' : '添加收货地址';
			this.getAddressDetails();
		},
		methods:{
			// 获取地址数据
			getAddressJson() {
				uni.request({
					url: this.$ossUrl+'/address/address.json',
					success: (res)=>{
						if(res.statusCode==404){
							addressData = addressDatas;
						}else {
							addressData = res.data;
						}
					},
					fail: (err)=>{
						console.log(err)
						addressData = addressDatas;
					},
					complete: ()=>{
						this.columns = [
							addressData.provinceData,
							addressData.cityData[0],
							addressData.areaData[0][0],
						]
					}
				})
			},
			getAddressDetails() {
				this.addressId && (
					address_detail({ id:this.addressId }).then(res=>{
						let { province,city,area,address,name,mobile,is_default } = res.data;
						this.form.s_phone = mobile;
						this.form.s_name = name;
						this.form.province = province;
						this.form.city = city;
						this.form.area = area;
						this.form.address = address;
						this.form.isdef = is_default;
					}).catch(()=>{})
				)
			},
			
			// 选择地址
			changeHandler(e) {
				const {columnIndex,indexs,picker = this.$refs.uPicker} = e
				if (columnIndex === 0) {
					picker.setColumnValues(1, addressData.cityData[indexs[0]])
					picker.setColumnValues(2, addressData.areaData[indexs[0]][indexs[1]])
				}else if (columnIndex === 1) {
					picker.setColumnValues(2, addressData.areaData[indexs[0]][indexs[1]])
				}
			},
			
			// 确认地址
			confirmAdd(e) {
				let val = e.value;
				this.form.province = val[0].label;
				this.form.city = val[1].label;
				this.form.area = val[2].label;
				this.showPicker = false;
			},
			
			// 保存收货地址
			saveAdd() {
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				this.addressId && (this.form.id = this.addressId)
				add_edit_address(this.form).then( res => {
					uni.$u.toast(res.msg)
					uni.$emit('updateAddressList')
					setTimeout( () => {
						uni.navigateBack()
					},1500)
				}).catch( err => {})
			}
		}
	}
</script>

<style lang="scss">
	.form{
		width: 100%;
		border-radius: 24rpx;
		@extend .plr-16,.ptb-8;
		
		>.ipt{
			width: 100%;
			position: relative;
			@extend .flex-center;
			
			>text{
				width: 180rpx;
				display: inline-block;
				font-size: 28rpx;
				@extend .font-color-999;
			}
			
			>.right{
				width: calc(100% - 180rpx);
				height: 100%;
				position: absolute;
				right: 0;
				top: 0;
				z-index: 1;
			}
		}
	}
	.isdef{
		width: 100%;
		height: 100rpx;
		border-radius: 24rpx;
		@extend .flex-center-sb,.mt-16,.plr-16;
		>text{ font-size: 28rpx;@extend .font-color-999; }
	}
</style>
